<template>
    <div style="display: flex; justify-content: space-between">
        <h2>课程显示</h2>
        <h2><button @click="go2add()">添加课程</button></h2>
    </div>
    <div style="display: flex">
        <div style="width: 67%; border: blue 1px solid">
			
            <h2 style="text-align: center">课程显示</h2>
            <table border="1" style="width: 100%">
                <tr>
                    <th>课程编号</th>
                    <th>课程名称</th>
                    <th>操作</th>
                    <th>删除</th>
                </tr>
                <tr v-for="x, idx in courses" :key="x.cno" @click="go2update(x)" :class="{ c: course.cno == x.cno }">
                    <th>{{ x.cno }}</th>
                    <th>{{ x.cname }}</th>
                    <th><button @click.stop="openModal(x)">修改</button></th>
                    <th><button @click="del(x.cno)">删除</button></th>
                </tr>
            </table>
            {{ dodel }}
        </div>
    </div>

    <!-- 模态框 -->
	 <!-- 通过 v-if 控制模态框的显示与隐藏，如果模态框显示，则添加一个 .modal-overlay 类，否则移除该类 -->
    <div v-if="showModal" class="modal-overlay" @click="closeModal">
        <div class="modal" @click.stop>
            <h2>{{ actidx === 1 ? '添加课程' : '修改课程' }}</h2>
			<!-- 这个是通过 v-if判断actidx为1时显示添加，为0时显示修改 -->
            <div>
                课程编号：<input type="text" v-model="course.cno" :readonly="actidx === 0"><br>
				<hr>
                课程名称：<input type="text" v-model="course.cname"><br><hr>
                <button @click="addupdate()">保存</button>
                <button @click="closeModal">取消</button>
            </div>
        </div>
    </div>

</template>

<script>
export default {
    name: "Course",
    data() {
        return {
            courses: [],
            course: { cno: "", cname: "" },
            actidx: 0,
            token: "",
            dodel: "",
            showModal: false
        };
    },
    methods: {
        del(cno) {
            var that = this;
            this.$axios.get(this.$ip + "/api/adm/course/del?cno=" + cno, { headers: { 'Authorization': this.token } }).then(function (resp) {
                that.courses = resp.data.data;
                console.log(resp.data.data);
            });
        },
        go2add() {
            this.actidx = 1;
            this.course = { cno: "", cname: "" };
            this.openModal();
        },
        go2update(course) {
            this.actidx = 0;
            var that = this;
            this.$axios.get(this.$ip + "/api/adm/course/findOne/" + course.cno, { headers: { 'Authorization': this.token } }).then(function (resp) {
                that.course = resp.data.data;
                console.log(resp.data.data);
                that.openModal();
            });
        },
        addupdate() {
            if (!this.course.cno || !this.course.cname) {
                alert("添加不允许为空");
                return;
            }
            var that = this;
            var p = this.actidx > 0 ? this.$ip + "/api/adm/course/add" : this.$ip + "/api/adm/course/update";
            this.$axios.post(p, that.course, { headers: { 'Authorization': that.token } }).then(function (resp) {
                that.courses = resp.data.data;
                that.dodel = resp.data.msg;
                console.log(resp.data.data);
                that.closeModal();
            });
        },
        openModal(course) {
            if (course) {
                this.course = { ...course };
            } else {
                this.course = { cno: "", cname: "" };
            }
            this.showModal = true;
        },
        closeModal() {
            this.showModal = false;
            this.course = { cno: "", cname: "" };
            this.actidx = 0; // 确保 actidx 重置为 0
        }
    },
    mounted() {
        this.token = window.localStorage.getItem("token");
        console.log(this.token);
        var that = this;
        console.log(this.$ip);
        this.$axios.get(this.$ip + "/api/public/getCourses").then(function (resp) {
            that.courses = resp.data.data;
            console.log(resp.data.data);
        });
    }
};
</script>

<style>
/* 设置高亮 */
.c {
    color: red;
    background: rgb(0, 224, 224);
}

/* 模态框样式 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal {
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>